<template>
  <div class="menu">
    <el-menu
      :default-active="this.$route.path"
      router
      background-color="#252529"
      text-color="#fff"
      active-text-color="#fff"
      class="el-menu-vertical-demo"
      unique-opened
      :collapse="isCollapse"
    >
      <div v-if="!isCollapse" class="title_unfold">
        <img :src="logoimg" alt="" class="logo" />
      </div>
      <div v-else class="title_fold el-icon-more-outline"></div>
      <template v-for="(item, index) in role">
        <el-submenu :index="item.path" v-if="Array.isArray(item.children)">
          <template slot="title">
            <i :class="`icon iconfont ${item.icon}`"></i>
            <span class="title">{{ item.title }}</span>
          </template>
          <el-menu-item
            v-for="(self, idx) in item.children"
            :key="`${index}-${idx}`"
            :index="self.path"
          >
            <i :class="self.icon ? self.icon : ''"></i>
            <span slot="title" style="display: flex; align-items: center">
              <span
                v-if="!self.icon || self.icon !== '' || self.icon !== null"
                class="dot"
              ></span>
              {{ self.title }}
            </span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item :index="item.path" v-if="!Array.isArray(item.children)">
          <i :class="`icon iconfont ${item.icon}`"></i>
          <span slot="title" class="title">{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "Menu",
  data() {
    return {
      store: "沃奇健身万达荣耀店",
      visible: false,
      logoimg: ""
    };
  },
  computed: {
    ...mapState(["isCollapse", "role", "org_id"]) //获取激活菜单路由和菜单是否展开
  },
  created() {
    this.logoimg = JSON.parse(window.sessionStorage.getItem("userInfo")).logo;
  },
  watch: {
    org_id(val) {
      this.logoimg = window.sessionStorage.getItem("logoimg");
    }
  }
};
</script>

<style scoped>
@import "../assets/style/menu.css";

.logo {
  width: 112.5px;
  height: 60px;
  margin-left: 10px;
}
</style>
